import { Button, Pagination, Popconfirm, Table, message } from 'antd';
import React, { useEffect, useState } from 'react';
import {
  administratorroleAPI,
  roledeleteAPI,
} from '../../apis/administratorrole/index';
import Modal from './Modal';
import './index.scss';

const Index: React.FC = () => {
  //列表
  const [list, setList] = useState();
  // 页
  const [pages, setPages] = useState({ page: 1, psize: 5 });
  //总数
  const [total, setTotal] = useState();
  //弹窗标题
  const [modalText, setmodalText] = useState('添加角色');
  //编辑id
  const [row, setRow] = useState<any>({});
  //弹框是否打开
  const [open, setOpen] = useState(false);
  const getlist = async () => {
    const res = await administratorroleAPI(pages);
    console.log(res);
    setTotal(res.data.counts);
    setList(res.data.list);
  };
  // 分页
  const onChanges = (page: any, psize: any) => {
    console.log(page, psize);
    setPages({ ...pages, page, psize });
  };
  useEffect(() => {
    getlist();
  }, [pages]);
  // 添加
  const roleAdd = () => {
    setmodalText('添加角色');
    setOpen(true);
  };

  // 删除

  const confirm = async (e: React.MouseEvent<HTMLElement>) => {
    const res: any = await roledeleteAPI({ id: e });
    console.log(res);
    if (res.errCode === 10000) {
      message.success('删除成功');
    } else {
      message.error(res.errMsg);
    }
    getlist();
  };

  const cancel = () => {
    message.error('已取消删除');
  };
  //编辑
  const edit = async (row: any) => {
    console.log(row);
    setmodalText('编辑角色');
    setOpen(true);
    setRow(row);
  };
  //表格配置项
  const columns:any = () => [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      // width: 200,
      align: 'center',
    },
    {
      title: '登录账号',
      dataIndex: 'name',
      key: 'name',
      // width: 200,
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      // width: 50,
      align: 'center',
      render: (row: any) => (
        <>
          <Button
            type="primary"
            style={{ marginLeft: '10px', background: '#67c23a' }}
            onClick={() => edit(row)}
          >
            修改
          </Button>
          <Popconfirm
            title="警告"
            description="确认删除吗?"
            onConfirm={() => confirm(row.id)}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button style={{ marginLeft: '10px' }} type="primary" danger>
              删除
            </Button>
          </Popconfirm>
        </>
      ),
    },
  ];
  return (
    <>
      <div className="administratorrole">
        <div className="nav">
          <p>角色管理</p>
        </div>
        <div className="add">
          <Button type="primary" onClick={roleAdd}>
            添加
          </Button>
          <Modal
            modalText={modalText}
            open={open}
            row={row}
            getlists={getlist}
            setOpen={setOpen}
            setRow={setRow}
          ></Modal>
        </div>
        <div className="tab">
          <Table
            bordered
            columns={columns()}
            dataSource={list}
            rowKey={(record) => record.id}
            pagination={{ position: [] }}
          />
        </div>
        <div style={{ padding:"20px" }}>
          <Pagination
            pageSizeOptions={['5', '10', '20', '30']}
            defaultPageSize={5}
            defaultCurrent={1}
            total={total}
            onChange={onChanges}
            showTotal={(total) => `总共 ${total} 条`}
          />
        </div>
      </div>
    </>
  );
};
export default Index;
